<template>
  <div class="back">
    <div class="article-detail">
      <div class="header">
        <h1>{{ article.title }}</h1>
        <div class="meta">
          <span class="author">作者：{{ article.author }}</span>
        </div>
      </div>
      <MdEditor v-model="article.content" :previewOnly="true"></MdEditor>
      <div class="comments">
        <h3>全部评论（{{ comments.length }}）</h3>
        <div class="comment-box">
          <textarea v-model="newComment" placeholder="请输入评论内容"></textarea>
          <button @click="addComment">提交</button>
        </div>
        <ul>
          <li v-for="comment in comments" :key="comment._id" class="comment-item">
            <div class="comment-avatar">
              <img src="https://picsum.photos/60/60" alt="">
            </div>
            <div class="comment-content-wrap">
              <div class="comment-meta">
                <span class="comment-author">{{ comment.author }}</span>
                <span class="comment-time">{{ getDate(comment.created) }}</span>
              </div>
              <div class="comment-content">{{ comment.content }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="back-btn">
        <button @click="$router.back()">返回列表</button>
      </div>
    </div>
  </div>

</template>

<script>
import {getArticleDetailById,showArticleDetailById} from "@/api/article";
import {getCommentListByArticleId,publishComment} from "@/api/comment";
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
export default {
  name: "ArticleDetail",
  props: {
    id: {
      type: String,
      required: true
    }
  },
  components:{
    MdEditor
  },
  data() {
    return {
      article: {
        title: '',
        author: '',
        created: '',
        hit: '',
        commentNum: '',
        content: ''
      },
      comments: [],
      newComment: '',
    };
  },

  methods: {
    fetchArticleDetail() {
      const params = this.$route.params;
      showArticleDetailById(params).then(res => {
        this.article = res.data.data;
        console.log(this.article);
      });
    },
    fetchComments() {
      const params = {
        articleId:this.$route.params.id
      }
      getCommentListByArticleId(params).then(res => {
        this.comments = res.data.data;
        console.log(this.$route.params.id);
      });
    },
    getDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1 + '').padStart(2, '0');
      const day = (d.getDate() + '').padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    addComment() {
      if (!this.newComment) {
        alert("评论不能为空！");
        console.error("评论内容不能为空！");
        return;
      }
      const params = new FormData();
      params.append("articleId",this.$route.params.id);
      params.append("content",this.newComment);
      publishComment(params).then(res => {
        console.log(this.$route.params.id);
        this.comments.push(res.data.data);
        this.newComment = '';
      });
    }
  },
  mounted() {
    this.fetchArticleDetail();
    this.fetchComments();
  },
}
</script>

<style scoped>
.back {
  background-color: #fbd3e0;
  background-image: url('https://img2.baidu.com/it/u=1250909930,2476286310&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');
}
.article-detail {
  margin: 20px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #f7f7f7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
  margin-bottom: 30px;
  text-align: center;
}
.header h1 {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
  line-height: 1.3;
}
.meta {
  font-size: 18px;
  color: #999;
  margin-top: 10px;
}
.comments h3 {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
}
.comment-item {
  margin-bottom: 50px;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 30px;
}
.comment-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #e6e6e6;
}
.comment-content-wrap {
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.comment-content {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.8;
  text-indent: 2em;
}
.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #999;
}
.comment-author {
  margin-right: 10px;
}
.comment-time {
  margin-left: 10px;
}
.back-btn {
  text-align: center;
  margin-bottom: 30px;
}
.back-btn button {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #42b983;
  border: none;
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.back-btn button:hover {
  background-color: #36a274;
}
.comment-box {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}
.comment-box textarea {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  resize: none;
  min-height: 100px;
}
.comment-box button {
  align-self: flex-end;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  background-color: #42b983;
  color: #fff;
  cursor: pointer;
}
.comment-box button:hover {
  background-color: #36a274;
}

</style>
